<template>
  <div class="insertFood">
    <div class="insertFood-item">
      <div class="insertFoodName">美食名称</div>
      <div>
        <el-input v-model="input" placeholder="请输入内容"></el-input>
      </div>
    </div>
    <div class="insertFood-item">
      <div class="insertFoodName">美食类别</div>
      <div>
        <el-select @change="changeValue" v-model="value" placeholder="请选择">
          <el-option
            v-for="item in values"
            :key="item.ftId"
            :label="item.ftName"
            :value="item.ftId"
          >
          </el-option>
        </el-select>
      </div>
    </div>

    <div class="insertFood-item">
      <div class="insertFoodName">美食介绍</div>
      <div>
        <el-input v-model="input3" placeholder="请输入内容"></el-input>
      </div>
    </div>

    <div class="insertFood-item">
      <div class="insertFoodName">美食图片</div>
      <div class="insertFoodImg">
        <img :src="list" alt="" v-if="list" />
        <div class="insertText" @click="updateImg" v-else>点击添加</div>
      </div>
    </div>

    <div class="adminUpdate-item">
      <div class="insertFoodName">制作步骤</div>
      <div class="adminTextarea">
        <quill-editor v-model="textarea"> </quill-editor>
      </div>
    </div>

    <div class="adminUpdate-item">
      <div class="adminWanCheng">
        <el-button @click="complete" type="primary">完成</el-button>
      </div>
    </div>

    <div v-if="updateOut">
      <update-food-img
        v-on:childByOut="childByOut"
        v-on:childImg="childImg"
      ></update-food-img>
    </div>
  </div>
</template>

<script>
import UpdateFoodImg from "./UpdateFoodImg.vue";
import { request } from "../../network/request";
export default {
  components: { UpdateFoodImg },
  name: "InsertFood",
  data() {
    return {
      input: "",
      input2: "",
      input3: "",
      textarea: "",
      panImg: true,
      updateOut: "",
      list: "",
      values: "",
      value: "",
      nowValue: "",
    };
  },
  created() {
    request({
      url: "/foot/queryFootType",
    })
      .then((res) => {
        this.values = res.data.data;
        console.log(res, this.value);
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    childByOut: function (childValue) {
      this.updateOut = childValue;
      console.log(this.updateOut);
    },
    childImg: function (childValue) {
      this.list = childValue;
      console.log(this.list);
    },
    updateImg() {
      this.updateOut = true;
    },
    complete() {
      request({
        url: "/foot/addFoot",
        method: "post",
        params: {
          fContent: this.input3,
          fImg: this.list,
          fMake: this.textarea,
          fName: this.input,
          ftId: this.nowValue,
        },
      })
        .then((res) => {
          this.$alert("插入成功", "提示", {
            confirmButtonText: "确定",
            callback: () => {
              (this.input3 = ""),
                (this.list = ""),
                (this.textarea = ""),
                (this.input = ""),
                (this.value = "");
            },
          });
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    changeValue(event) {
      console.log(event);
      this.nowValue = event;
    },
  },
};
</script>

<style>
.insertFood {
  width: 80%;
  margin: 0 auto;
  text-align: center;
  font-size: 0.1rem;
}
.insertFood-item {
  display: flex;
  align-items: center;
  margin-top: 0.18rem;
}
.insertFoodName {
  width: 1rem;
}

.insertText {
  text-align: center;
  margin-top: 0.42rem;
  cursor: pointer;
}

.insertText:hover {
  color: rgb(152, 194, 223);
}

.insertFoodImg {
  width: 1.2rem;
  height: 1rem;
  border: 1px solid rgb(179, 174, 174);
}

.insertFoodImg img {
  width: 100%;
  height: 100%;
}
</style>